<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery Selector</title>
		<style type="text/css">
			div.green1 {
				background-color: #99CC33;
				font-family: Monaco;
				width: 600px;
				font-size:14px;
				float: left;
			}
			
			div.green2 {
				background-color: #66CC66;
				font-family: "Century Gothic";
				width: 350px;
				height: 100px;
				font-size:14px;
				float: left;
			}
			
			div.wrapper {
				height: 100px;
			}
		</style>
		
		<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="scripts/jqia2.support.js"></script>
		
		<script type="text/javascript">
			var imgs = ["images/image2.jpg", "images/image4.jpg", "images/little.bear.png"];
			var imgIndex = imgs.length - 1;
			var arrIndex = 0; 
			
			window.onload = function() {
				
				// 注意，jquery包裹器都是回傳類似一個javascript的陣列，是回傳一個包裹集合
				var elements = $("p").get();
//				document.getElementById("btn").onclick = function() {
//					alert(elements[0].id + " innerHTML is " + elements[0].innerHTML);
//					alert(elements[1].id + " innerHTML is " + elements[1].innerHTML);
//				}
				
				var btn = $("#btn").get(0).onclick = function() {
					alert(elements[0].id + " innerHTML is " + elements[0].innerHTML);
					alert(elements[1].id + " innerHTML is " + elements[1].innerHTML);
				}
				
				$("input[value='execute']").get(0).onclick = changeDivStyle;
				
				$("form[name='myform1']").submit(function() {
					if( $("input:first").val() == "111" ) {
//						alert("true");
						return true;
					} else {
						alert("wrong password!!!");
						return false;  // 若回傳false，則表單資料值不會發送至Server Side
					}
				});
				
//				var b = $("form[name='myform1']").add($("input last-child"));
//				if(b == null )alert(b.id);
				
//				var c = $("form[name='myform1']:has(input[value='execute'])").get(0);
//				alert(c.id);
				
				$("input[value='execute']").get(1).onclick = changeBack;
//				$("#lastBtn").get(0).onclick = changeBack;

				var nextPicBtns = $("#nextBtn");
				nextPicBtns[0].onclick = nextImg;
				
				$("#newDOM").get(0).onclick = function() {
					$("<img>",
						{	
							src: "./images/BlackSaint.jpg",
							alt: "Old and New Dreams - BlackSaint",
							id: "newPic",
							title: "Old and New Dreams",
							click: function() {
								alert($(this).attr('title'));
							}
						}).css({
							cursor: 'pointer',
							border: '1px solid black',
							padding: '12px 12px 20px 12px',
							backgroundColor: 'white'
						}).appendTo("body");
						
					$("<img>", 
						{
							click: function() {
								var a = confirm("Are you sure you want to remove the picture?");
								if (a) {
									$("#newPic").remove();
									$(this).remove();
								}
//								else alert("You choose not remove it!");
							},
							src: "./images/backg.png",
						}
					).css({
						cursor: 'pointer'
					}).appendTo("body");
						
				} // end of anonymous function
				
				$("img[alt='koala']").each(function() {
					this.onclick = function() {
						say("You <em><b>click</b></em> the koala!");
					}
					
					this.onmouseover = function(event) {
						say("the mouse over the koala!");
					}
				});
				
				$("img[alt='cute dog']").each(function() {
					$(this).bind("click", function(event) {
						say("you <em><b>click</b></em> the cute dog... haha");
					});
				});
				
				$("img[alt='cute dog']").bind("click", function(event) {
					say("you <em><b>click</b></em> the cute dog...");
				}).bind("mouseover", function(event) {
					say("the mouse over the cute dog!");
				});
				
				
			} // end of window.onload anonymous function
			
			function changeDivStyle() {
				var value = $('[name=changeStyle]:checked').val();
				if(value == "yes") {
					$("div.green1").css({
						backgroundColor: '#9966CC',
						fontFamily: 'MV Boli',
						fontSize: '20px',
						width: '700px'
					});
				} else if(value == 'no') {
					alert("You choose NOT to change the style of div!");
				} else 
					alert("You didn't choose anything... orz...");
			}
			
			function changeBack() {
				if( $("[name='changeBack']:checked").val() == "yes" ) {
					$("div.green1").css({
						backgroundColor: '#99CC33',
						fontFamily: 'Monaco',
						fontSize: '14px',
						width: '600px'
					});
				} else if( $("[name='changeBack']:checked").val() == "no" ) {
					alert("You choose NOT to change back the style of div!")
				} else
					alert("You didn't choose anything... orz...");
			}
			
			function nextImg() {
				arrIndex++;
				if(arrIndex <= imgIndex)
					$("img[alt$='dog']").get(0).src = imgs[arrIndex];
			}
		</script>
	</head>
	
	<body>
		<p id="p1">This is a text....</p>
		<p id="p2">This is an another text... </p>
		<button id="btn">click me</button><br />
		<div class="wrapper">
			
			<div class="green1">
				<form name="myform1" action="javascript: alert('success');">
					this is a textfield: <input type="text" size="5" name="userName" /><br />
					<input type="submit" value="Go" /><br />
					Do you want to change the style of this div? 
					<input type="radio" name="changeStyle" value="yes" /> yes
					<input type="radio" name="changeStyle" value="no" /> no
					<input type="button" value="execute" /><br />
					Do you want to change back the the style of div?
					<input type="radio" name="changeBack" value="yes" /> yes
					<input type="radio" name="changeBack" value="no" /> no
					<input type="button" value="execute" id="lastBtn" /><br />
				</form>
			</div>
			<div class="green2">
				<img src="images/image2.jpg" alt="small dog" /><br />
				This is a small dog...<br />
			</div>
			<div style="float:none;">
				<button id="nextBtn">Next Picture</button>
				<button id="newDOM">create</button>
			</div>
		</div>
		
		<div class="wrapper">
			<div style="float:left; cursor:pointer;">
				<img src="./images/koala.jpg" alt="koala" width="300px" />
			</div>	
			<div style="float:left; cursor:pointer;">
				<img src="./images/cutedog1.jpg" alt="cute dog" width="300px" />
			</div>	
		</div>
		
	</body>
</html>
